import React, { useState, useEffect } from 'react';
import { TabBar, TabBarItem } from 'tdesign-mobile-react';
import { HomeIcon, UserIcon,AddCircleIcon,ChatIcon,LogoChromeIcon } from 'tdesign-icons-react';
import { NavLink,Routes,Route,useLocation} from 'react-router-dom';
import Msg from './pages/Msg';
import Home from './pages/Home';
import BootPage from './pages/BootPage';
import Issue from './pages/Issue';
import My from './pages/My';
import Square from './pages/Square';
import GuidePage from "./pages/GuidePage"
function TabBarBaseDemo(props) {
  const list = [
    { name: 'home', text: '首页', icon: <HomeIcon /> },
    { name: 'square', text: '广场', icon: <LogoChromeIcon /> },
    { name: 'issue', text: '发布', icon: <AddCircleIcon /> },
    { name: 'msg', text: '消息', icon: <ChatIcon /> },
    { name: 'my', text: '我的', icon: <UserIcon /> }
  ];
  const localation=useLocation()
  const pathName=localation.pathname.split('/')[1]
  const [value, setValue] = useState(pathName=='swiper'?'home':pathName);
  console.log(localation.pathname.split('/')[1])
  const change = (changeValue) => {
    setValue(changeValue);
  };

  useEffect(() => {
    console.log('当前值：', value);
  }, [value]);

  return (
    <div className="demo-tab-bar">
      <Routes>
          <Route path='/' exact element={<BootPage />} ></Route>
          <Route path='/home' element={<Home />}></Route>
          <Route path='/msg' element={<Msg/>}></Route>
          <Route path='/issue' element={<Issue/>}></Route>
          <Route path='/my' element={<My/>}></Route>
          <Route path='/square' element={<Square/>}></Route>
      </Routes>
      {localation.pathname.split('/')[1]==''?<BootPage></BootPage>:localation.pathname.split('/')[1]=='swiper'?<GuidePage></GuidePage>:<TabBar value={value} onChange={change}>
        {list.map((item, i) => (
          <TabBarItem key={item.name || i} icon={item.icon} value={item.name}>
            <NavLink to={item.name}>{item.text}</NavLink>
          </TabBarItem>
        ))}
      </TabBar>}
      
    </div>
  );
}

export default TabBarBaseDemo;
